<!--消防  展示数据-->
<template>
    <div class="presentationData">
        <div v-for="(item, index) in data.list" :key="index">
            <div>
                <img :src="item.img" alt="" />
            </div>
            <div>
                <div>{{ item.name }}</div>
                <div>
                    <span>{{ item.num }}</span>
                    <span>{{ item.unit }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import img1 from '@/assets/image/fireControlimg1.png';
import img2 from '@/assets/image/fireControlimg2.png';
import img3 from '@/assets/image/fireControlimg3.png';
import img4 from '@/assets/image/fireControlimg4.png';
import img5 from '@/assets/image/fireControlimg5.png';

const data = reactive({
    list: [
        {
            img: img1,
            name: '消防队',
            num: '10',
            unit: '支'
        },
        {
            img: img2,
            name: '消防车',
            num: '10',
            unit: '台'
        },
        {
            img: img3,
            name: '消防人员',
            num: '10',
            unit: '人'
        },
        {
            img: img4,
            name: '消防灭火器',
            num: '10',
            unit: '个'
        },
        {
            img: img5,
            name: '消防栓',
            num: '10',
            unit: '个'
        }
    ]
});
</script>

<style scoped lang="scss">
/**绝定定位 */
.presentationData {
    width: 60%;
    position: absolute;
    top: 13%;
    left: 20%;
    padding: 25px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: url(@/assets/image/fireControlback.png) no-repeat;
    background-size: 100% 100%;

    > div {
        padding-left: 46px;

        width: calc(100% / 5);
        display: flex;
        align-items: center;
        border-right: 1px solid rgba(255, 255, 255, 0.3);
        > div {
            &:nth-of-type(1) {
                width: 68px;
                height: 68px;
                margin-right: 16px;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            &:nth-of-type(2) {
                div {
                    &:nth-of-type(1) {
                        font-size: 14px;
                        color: #b7bdbf;
                        margin-bottom: 12px;
                    }
                    &:nth-of-type(2) {
                        display: flex;
                        align-items: center;
                        span {
                            &:nth-of-type(1) {
                                font-size: 28px;
                                font-family: PangMenZhengDao;
                                color: #ffffff;
                                display: inline-block;
                                margin-right: 8px;
                            }
                            &:nth-of-type(2) {
                                font-size: 12px;
                                color: #b7bdbf;
                            }
                        }
                    }
                }
            }
        }
        &:last-child {
            border-right: none;
            padding-right: 46px;
        }
    }
}
</style>
